<template>
	<view class="container">
	
		<!-- indicator-dots: 是否显示面板指示点。autoplay: 是否自动切换。interval: 自动切换时间间隔。duration: 滑动动画时长。
		indicator-active-color: 当前选中指示点的颜色。 swiper-item是swiper的子组件，用于包裹每一个轮播项。 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="pink"
			style="height: 300px;">
			<!-- swiper-item 每一项 -->
			<!--v-for 渲染swiper-item 组件-->
			<swiper-item v-for="(item, index) in swiperImageList" :key="index">
				<view class="swiper-item">
					<image :src="item.iurl" mode=""></image>
				</view>
			</swiper-item>

		</swiper>

		<view class="box" @click="toProduct">
			<!-- 包含两个视图（view），每个视图内有一个图片和两个文本（title和content），用于展示门店自取和外卖的图标、标题和简短描述。 -->
			<view>
				<image src="../../static/mendian.png" mode=""></image>
				<view class="title">门店自取</view>
				<view class="content">点单无需排队</view>
			</view>
			<view>
				<image src="../../static/waimai.png" mode=""></image>
				<view class="title">外卖</view>
				<view class="content">配送到家</view>
			</view>
		</view>
		<!-- 包含三个视图，每个视图展示一个信息块，包括标题（info-title）、文本（info-text）和图片。 -->
		<view class="info">
			<view>
				<view class="info-title">积分商城</view>
				<view class="info-text">点击了解详情</view>
				<image src="../../static/sc.png"></image>
			</view>
			<view>
				<view class="info-title">积分签到</view>
				<view class="info-text">点击了解详情</view>
				<image src="../../static/qd.png"></image>
			</view>
			<view>
				<view class="info-title">我的优惠券</view>
				<view class="info-text">点击了解详情</view>
				<image src="../../static/yhj.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		//返回一个对象，定义了组件的初始数据。这里定义了一个swiperImageList数组，用于存储轮播图的图片URL。
		data() {
			return {

				swiperImageList: [{
						iurl: "https://img.51miz.com/preview/element/00/01/12/09/E-1120966-7BF7F34C.jpg"
					},
					{
						iurl: "https://tse2-mm.cn.bing.net/th/id/OIP-C.ocJJY2VTRJ3RgIwtiC1nSgHaLb?rs=1&pid=ImgDetMain"
					},
					{
						iurl: "https://img.zcool.cn/community/01gg6c7kwbp4bngdtudtws3136.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"
					},
					{
						iurl: "https://gd-hbimg.huaban.com/1c6f30d56713c6ca6e46d7beba3a32df7593fa525d66b-ZcB5te_fw658"
					}
				]
			}
		},

		onLoad() {

		},
		// onShow() {
		// 	this.getBannerList()
		// },
		methods: {
			//用于跳转到产品列表页面，使用了uni.switchTab方法。
			toProduct() {
				uni.switchTab({
					url: "/pages/product/product"
				})
			}
		}
	}
</script>

<!-- scoped 表示样式只在局部生效 当前页面 -->
<style scoped>
	.swiper-item {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.container {
		background-color: #f5f5f5;
	}

	.box {
		display: flex;
		justify-content: space-around;
		margin: 30px 10px;
		background-color: #fff;
		boder-redius: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.box image {
		width: 100px;
		height: 100px;
	}

	.box>view view {
		text-align: center;
	}

	.title {
		font-weight: bold;
		font-size: 23px;
		margin-bottom: 5px;
	}

	.content {
		color: #ccc;
	}



	.info {
		/* 使用弹性盒模型布局 */
		display: flex;
		/* 设置主轴对齐方式 */
		justify-content: space-around;
	}

	.info view {
		/* 文本水平居中 */
		text-align: center;
	}

	.info image {
		width: 70px;
		height: 70px;
	}

	.info>view {
		line-height: 35px;
		background: pink;
		padding: 20px;
	}

	.info>view:nth-child(1) {
		background: #f5f6fa;
	}

	.info>view:nth-child(2) {
		background: #fdf7eb;
	}

	.info>view:nth-child(3) {
		background: rgb(242, 246, 229);
	}

	.info-title {
		font-weight: bold;
		font-size: 19px;

	}

	.info-text {
		color: #ccc;
		font-size: 13px;
		margin-bottom: 5px;
	}
</style>